<template>
  <div>
      <el-scrollbar class="designer-scrollbar">
      <el-tabs v-model="activeName" class="custom-designer-tabs" @tab-click="handleClick">
        <el-tab-pane label="常规配置" name="common">
          <!--   常规信息     -->
          <common-panel :id="elementId"/>
        </el-tab-pane>

        <el-tab-pane label="任务配置" name="task">
          <!--   用户任务信息     -->
          <template v-if="elementType.indexOf('UserTask') !== -1">
            <user-task-panel :id="elementId"/>
          </template>

          <!--   接收任务信息     -->
          <template v-else-if="elementType.indexOf('ReceiveTask') !== -1">
            <receive-task-panel :id="elementId"/>
          </template>

          <!--   发送任务信息     -->
          <template v-else-if="elementType.indexOf('SendTask') !== -1">
            <send-task-panel :id="elementId"/>
          </template>

          <!--   脚本任务信息     -->
          <template v-else-if="elementType.indexOf('ScriptTask') !== -1">
            <script-task-panel :id="elementId"/>
          </template>

          <!--   服务任务信息     -->
          <template v-else-if="elementType.indexOf('ServiceTask') !== -1">
            <service-task-panel :id="elementId"/>
          </template>

          <!--   业务规则任务信息     -->
          <template v-else-if="elementType.indexOf('BusinessRuleTask') !== -1">
            <business-rule-task-panel :id="elementId"/>
          </template>

          <!--   调用其他流程配置信息     -->
          <template v-else-if="elementType.indexOf('CallActivity') !== -1">
            <call-activity-task-panel :id="elementId"/>
          </template>

          <!--   未匹配或未选中任务     -->
          <el-empty v-else description="选择任务节点后配置"/>
        </el-tab-pane>

        <el-tab-pane label="监听配置" name="listener">
          <el-collapse v-model="activeListenerName" >
            <!--   执行监听器     -->
            <el-collapse-item name="executionListener">
              <template slot="title"><i class="el-icon-s-promotion"></i> 执行监听器
                <el-badge :value="executionListenerCount" class="item" type="primary"/>
              </template>
              <execution-listener :id="elementId" @getExecutionListenerCount="getExecutionListenerCount"/>
            </el-collapse-item>

            <!--   任务监听器     -->
            <el-collapse-item name="taskListener" v-if="elementType === 'UserTask'" >
              <template slot="title"><i class="el-icon-s-flag"></i> 任务监听器
                <el-badge :value="taskListenerCount" class="item" type="primary"/>
              </template>
              <task-listener :id="elementId" @getTaskListenerCount="getTaskListenerCount"/>
            </el-collapse-item>

          </el-collapse>
        </el-tab-pane>

        <el-tab-pane label="其它配置" name="other">
          <el-collapse v-model="activeOtherName" >
            <!--   表单     -->
            <el-collapse-item name="form" v-if="formVisible && elementType === 'UserTask'">
              <template slot="title"><i class="el-icon-s-order"></i> 表单配置</template>
              <form-panel :id="elementId"/>
            </el-collapse-item>

            <!--   多实例     -->
            <el-collapse-item name="multiInstance" v-if="elementType.indexOf('UserTask') !== -1" >
              <template slot="title"><i class="el-icon-s-grid"></i> 多实例</template>
              <multi-instance :id="elementId"/>
            </el-collapse-item>

            <!--   流转条件     -->
            <el-collapse-item name="condition" v-if="conditionVisible" >
              <template slot="title"><i class="el-icon-share"></i> 流转条件</template>
              <condition-panel :id="elementId"/>
            </el-collapse-item>

            <!--   消息,信号,错误信息    -->
            <el-collapse-item name="signalMassageError" v-if="elementType === 'Process'">
              <template slot="title"><i class="el-icon-s-comment"></i> 消息与信号</template>
              <signal-message-error-panel :id="elementId"/>
            </el-collapse-item>

            <!--   扩展属性     -->
            <el-collapse-item name="properties" >
              <template slot="title"><i class="el-icon-circle-plus"></i> 扩展属性</template>
              <properties-panel :id="elementId"/>
            </el-collapse-item>
         </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
  </div>
</template>

<script>
import ExecutionListener from './panel/executionListener'
import TaskListener from './panel/taskListener'
import MultiInstance from './panel/multiInstance'
import CommonPanel from './panel/commonPanel'
import UserTaskPanel from './panel/userTaskPanel'
import ReceiveTaskPanel from './panel/receiveTaskPanel'
import SendTaskPanel from './panel/sendTaskPanel'
import ScriptTaskPanel from './panel/scriptTaskPanel'
import ServiceTaskPanel from './panel/serviceTaskPanel'
import BusinessRuleTaskPanel from './panel/businessRuleTaskPanel'
import ConditionPanel from './panel/conditionPanel'
import FormPanel from './panel/formPanel'
import CopyPanel from './panel/copyPanel'
import OtherPanel from './panel/otherPanel'
import PropertiesPanel from './panel/propertiesPanel'
import SignalMessageErrorPanel from "./panel/signalMessageErrorPanel";
import CallActivityTaskPanel from "./panel/callActivityTaskPanel.vue";
import { translateNodeName } from "./common/bpmnUtils";
import {StrUtil} from "@/utils/StrUtil";
export default {
  name: "Designer",
  components: {
    SignalMessageErrorPanel,
    ExecutionListener,
    TaskListener,
    MultiInstance,
    CommonPanel,
    UserTaskPanel,
    ReceiveTaskPanel,
    SendTaskPanel,
    ScriptTaskPanel,
    ServiceTaskPanel,
    BusinessRuleTaskPanel,
    ConditionPanel,
    FormPanel,
    OtherPanel,
    CopyPanel,
    PropertiesPanel,
    CallActivityTaskPanel
  },
  data() {
    return {
      activeName: 'common',
      activeListenerName: ['executionListener','taskListener'],
      activeOtherName: ['form','multiInstance','condition'],
      executionListenerCount: 0,
      taskListenerCount: 0,
      elementId: "",
      elementType: "",
      conditionVisible: false,// 流转条件设置
      formVisible: false, // 表单配置
      rules: {
        id: [
          {required: true, message: '节点Id 不能为空', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '节点名称不能为空', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.initModels();
  },
  methods: {
    // 初始化流程设计器
    initModels() {
      this.getActiveElement();
    },

    // 注册节点事件
    getActiveElement() {
      // 初始第一个选中元素 bpmn:Process
      this.initFormOnChanged(null);
      this.modelerStore.modeler.on("import.done", e => {
        this.initFormOnChanged(null);
      });
      // 监听选择事件，修改当前激活的元素以及表单
      this.modelerStore.modeler.on("selection.changed", ({newSelection}) => {
        this.initFormOnChanged(newSelection[0] || null);
      });
      this.modelerStore.modeler.on("element.changed", ({element}) => {
        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
        if (element && element.id === this.elementId) {
          this.initFormOnChanged(element);
        }
      });
    },

    // 初始化数据
    initFormOnChanged(element) {
      let activatedElement = element;
      if (!activatedElement) {
        activatedElement =
          this.modelerStore.elRegistry.find(el => el.type === "bpmn:Process") ??
          this.modelerStore.elRegistry.find(el => el.type === "bpmn:Collaboration");
      }
      if (!activatedElement) return;
      this.modelerStore.element = activatedElement;
      this.elementId = activatedElement.id;
      this.elementType = activatedElement.type.split(":")[1] || "";
      this.conditionVisible = !!(
        this.elementType === "SequenceFlow" &&
        activatedElement.source &&
        activatedElement.source.type.indexOf("StartEvent") === -1
      );
      this.formVisible = this.elementType === "UserTask";
    },

    /** 获取执行监听器数量 */
    getExecutionListenerCount(value) {
      this.executionListenerCount = value;
    },
    /** 获取任务监听器数量 */
    getTaskListenerCount(value) {
      this.taskListenerCount = value;
    },
    translateNodeName(val){
      return translateNodeName(val);
    },
    /** tab点击事件*/
    handleClick(tab, event) {
      this.activeName = tab.name;
    }
  }
}
</script>

<style lang="scss">
.designer-scrollbar {
  height: calc(100vh - 150px);
  overflow-x: hidden !important;
}

.el-scrollbar__wrap {
  overflow-x: hidden !important;
}

.el-scrollbar__bar.is-horizontal {
  display: none !important;
}
.custom-designer-tabs{
  padding-left: 5px;
}
/** 重写el-tabs样式 */
.custom-designer-tabs .el-tabs__nav-wrap.is-scrollable{
 padding: 0;
}

// 节点点击后样式
.djs-selection-outline {
  stroke: #4ea84e !important;
  stroke-width: 1px;
}

.djs-element.selected .djs-outline {
  visibility: visible;
  stroke-dasharray: 5, 5;
  stroke-dashoffset: 500;
  animation: 0.8s linear 0s infinite normal none running draw;
  stroke: #4ea84e !important;
  stroke-width: 1px;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

// 隐藏右下角的 bpmn.io logo
//.bjs-powered-by {
//  display: none;
//}
</style>
